<template>
<!-- 插槽的应用 -->
  <div>
      <!-- 通常我们从父组件向子组件传递数据 通过在父组件绑定属性 在子组件props接收 -->
      <!-- 在父组件只能拿到当前组件data中的数据  不能拿到子组件的数据-->
      <!-- <myButton>{{childuRL}}匿名插槽</myButton> -->
      <!-- 具名插槽 -->
      <child> 
        <div>
            <!-- 老版本具名插槽 slot="header" -->
            <!-- vue 2.6.0+ 改为指令形式 slot:header 绑定在template -->
            <header>
                <div slot:header>
                    我是头部
                </div>
            </header>
            <main>
                <template>
                    我是内容
                </template>
            </main>
            <footer>
                <template slot:footer>
                    我是底部
                </template>
            </footer>
        </div>
      </child>
  </div>
</template>

<script>
import child from "./child";
export default {
    components:{
        'myButton':child
    },
    data(){
        return {
            url:"www.baidu.com",
            childuRL:'www.youdao.com',
        }
    }
}
</script>

<style>

</style>